<!--
 * @Description: 
 * @Author: lijiajin
 * @Date: 2020-07-06 09:04:53
 * @LastEditTime: 2020-07-10 08:49:56
 * @LastEditors: lijiajin
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,address=no">
    <title>设置-图库</title>
    <link rel="stylesheet" href="./icon/iconfont.css">
    <link rel="stylesheet" href="./plugins/layui/css/layui.css">
    <link rel="stylesheet" href="./css/nanoscroller.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/style.css">
    <script src="./js/JQuery2.1.4.js"></script>
    <script src="./plugins/layui/layui.js"></script>
    <script src="./js/spin.min.js"></script>
    <script src="./js/loading.js"></script>
</head>

<body>
</div>
<div class="wrap-box  wrap-bank-pic wrap-bank-pic-page">
    <p class="title-h1">图片库</p>
    <div class="content-box">
        <div class="pic-box">
            <div class="fenlei-div nano">
                <div class="fenlei nano-content">
                    <div class="mgt10 mgb10 mgl15 mgr15">
                        <a href="javascript:;" class="icon iconfont iconhao layui-btn ajax-add-group-btn"
                           data-url=""
                           data-title="添加分组"
                           data-text="">添加分组</a>
                    </div>
                    <div id="tree"></div>
                </div>
            </div>
            <div class="list">

                <div class="top">
                    <form class="fl ajax-form" id="pic_bank_upload_form" onsubmit="return false;">
                        <!--<div id="pic_bank_uploader" class="layui-btn upload-pic">本地上传</div>-->
                        <div class="pic-bank-top-upload-btn layui-btn">
                            本地上传
                            <input type="file" multiple name="file[]" id="file_upload"
                                   accept="image/jpg,image/jpeg,image/png" onchange="checkFile(this)"/>
                        </div>
                        <a data-type="0" href="javascript:;" class="layui-btn layui-btn-primary-blue ajax-bank-select-all-btn">全选</a>
                        <a href="javascript:;" class="layui-btn layui-btn-primary-blue ajax-bank-move-group-btn"
                           data-url=""
                           data-title="移动分组">
                            <i class="icon iconfont iconyidong3"></i>
                            移动
                        </a>
                        <a href="javascript:;" class="layui-btn layui-btn-primary-blue ajax-bank-delete-btn"
                           data-url="">
                            <i class="icon iconfont iconshanchuanniu"></i>
                            删除
                        </a>
                        <a href="javascript:;" class="layui-btn layui-btn-primary-blue ajax-bank-watermark-refresh"
                           data-url=""
                           data-title="更新水印">
                            <i class="icon iconfont iconshuaxin"></i>
                            更新水印
                        </a>
                    </form>
                    <form class="fr" action="">
                        <img src="./images/search.png"/>
                        <input type="text" name="aaa" placeholder="请输入图片名称搜索"/>
                        <button type="submit" class="layui-btn">搜索</button>
                    </form>
                </div>
                <!--has data-->
                <div class="list-div nano" style="display: block;">
                    <ul class="nano-content" id="img_bank_box">
                        <li data-id="1">
                            <div class="img">
                                <img alt="" title="" src="./images/image.png"/>
                                <div class="cover">
                                    <div class="check-box-div">
                                        <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong">
                                            <input class="checkbox-input" type="checkbox" name="checkbox" value="1"/>
                                        </a>
                                    </div>
                                    <a href="javascript:;" class="magnifier icon iconfont iconfangdajing1"
                                       onclick="picBankDialogMagnifierPic(this);"></a>
                                </div>
                            </div>
                            <p class="name" title="">
                                <span>fsdgsdhgrhr</span>
                                <a href="javascript:;" class="edit-btn icon iconfont iconbianjibi"></a>
                                <input type="text" name="editname" class="edit-input" value=""/>
                            </p>
                        </li>
                        <li data-id="2">
                            <div class="img">
                                <img alt="" title="" src="./images/watermark_img.png"/>
                                <div class="cover">
                                    <div class="check-box-div">
                                        <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong">
                                            <input class="checkbox-input" type="checkbox" name="checkbox" value="2"/>
                                        </a>
                                    </div>
                                    <a href="javascript:;" class="magnifier icon iconfont iconfangdajing1"
                                       onclick="picBankDialogMagnifierPic(this);"></a>
                                </div>
                            </div>
                            <p class="name" title="">
                                <span>fsdgsdhgrhr</span>
                                <a href="javascript:;" class="edit-btn icon iconfont iconbianjibi"></a>
                                <input type="text" name="editname" class="edit-input" value=""/>
                            </p>
                        </li>
                        <li data-id="1">
                            <div class="img">
                                <img alt="" title="" src="./images/image.png"/>
                                <div class="cover">
                                    <div class="check-box-div">
                                        <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong">
                                            <input class="checkbox-input" type="checkbox" name="checkbox" value="1"/>
                                        </a>
                                    </div>
                                    <a href="javascript:;" class="magnifier icon iconfont iconfangdajing1"
                                       onclick="picBankDialogMagnifierPic(this);"></a>
                                </div>
                            </div>
                            <p class="name" title="">
                                <span>fsdgsdhgrhr</span>
                                <a href="javascript:;" class="edit-btn icon iconfont iconbianjibi"></a>
                                <input type="text" name="editname" class="edit-input" value=""/>
                            </p>
                        </li>
                        <li data-id="2">
                            <div class="img">
                                <img alt="" title="" src="./images/watermark_img.png"/>
                                <div class="cover">
                                    <div class="check-box-div">
                                        <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong">
                                            <input class="checkbox-input" type="checkbox" name="checkbox" value="2"/>
                                        </a>
                                    </div>
                                    <a href="javascript:;" class="magnifier icon iconfont iconfangdajing1"
                                       onclick="picBankDialogMagnifierPic(this);"></a>
                                </div>
                            </div>
                            <p class="name" title="">
                                <span>fsdgsdhgrhr</span>
                                <a href="javascript:;" class="edit-btn icon iconfont iconbianjibi"></a>
                                <input type="text" name="editname" class="edit-input" value=""/>
                            </p>
                        </li>
                        <li data-id="1">
                            <div class="img">
                                <img alt="" title="" src="./images/image.png"/>
                                <div class="cover">
                                    <div class="check-box-div">
                                        <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong">
                                            <input class="checkbox-input" type="checkbox" name="checkbox" value="1"/>
                                        </a>
                                    </div>
                                    <a href="javascript:;" class="magnifier icon iconfont iconfangdajing1"
                                       onclick="picBankDialogMagnifierPic(this);"></a>
                                </div>
                            </div>
                            <p class="name" title="">
                                <span>fsdgsdhgrhr</span>
                                <a href="javascript:;" class="edit-btn icon iconfont iconbianjibi"></a>
                                <input type="text" name="editname" class="edit-input" value=""/>
                            </p>
                        </li>
                        <li data-id="2">
                            <div class="img">
                                <img alt="" title="" src="./images/watermark_img.png"/>
                                <div class="cover">
                                    <div class="check-box-div">
                                        <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong">
                                            <input class="checkbox-input" type="checkbox" name="checkbox" value="2"/>
                                        </a>
                                    </div>
                                    <a href="javascript:;" class="magnifier icon iconfont iconfangdajing1"
                                       onclick="picBankDialogMagnifierPic(this);"></a>
                                </div>
                            </div>
                            <p class="name" title="">
                                <span>fsdgsdhgrhr</span>
                                <a href="javascript:;" class="edit-btn icon iconfont iconbianjibi"></a>
                                <input type="text" name="editname" class="edit-input" value=""/>
                            </p>
                        </li>
                        <li data-id="1">
                            <div class="img">
                                <img alt="" title="" src="./images/image.png"/>
                                <div class="cover">
                                    <div class="check-box-div">
                                        <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong">
                                            <input class="checkbox-input" type="checkbox" name="checkbox" value="1"/>
                                        </a>
                                    </div>
                                    <a href="javascript:;" class="magnifier icon iconfont iconfangdajing1"
                                       onclick="picBankDialogMagnifierPic(this);"></a>
                                </div>
                            </div>
                            <p class="name" title="">
                                <span>fsdgsdhgrhr</span>
                                <a href="javascript:;" class="edit-btn icon iconfont iconbianjibi"></a>
                                <input type="text" name="editname" class="edit-input" value=""/>
                            </p>
                        </li>
                        <li data-id="2">
                            <div class="img">
                                <img alt="" title="" src="./images/watermark_img.png"/>
                                <div class="cover">
                                    <div class="check-box-div">
                                        <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong">
                                            <input class="checkbox-input" type="checkbox" name="checkbox" value="2"/>
                                        </a>
                                    </div>
                                    <a href="javascript:;" class="magnifier icon iconfont iconfangdajing1"
                                       onclick="picBankDialogMagnifierPic(this);"></a>
                                </div>
                            </div>
                            <p class="name" title="">
                                <span>fsdgsdhgrhr</span>
                                <a href="javascript:;" class="edit-btn icon iconfont iconbianjibi"></a>
                                <input type="text" name="editname" class="edit-input" value=""/>
                            </p>
                        </li>
                        <li data-id="1">
                        <div class="img">
                            <img alt="" title="" src="./images/image.png"/>
                            <div class="cover">
                                <div class="check-box-div">
                                    <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong">
                                        <input class="checkbox-input" type="checkbox" name="checkbox" value="1"/>
                                    </a>
                                </div>
                                <a href="javascript:;" class="magnifier icon iconfont iconfangdajing1"
                                   onclick="picBankDialogMagnifierPic(this);"></a>
                            </div>
                        </div>
                        <p class="name" title="">
                            <span>fsdgsdhgrhr</span>
                            <a href="javascript:;" class="edit-btn icon iconfont iconbianjibi"></a>
                            <input type="text" name="editname" class="edit-input" value=""/>
                        </p>
                    </li>
                    </ul>
                </div>

                <!--empty data-->
                <div class="no-pic" style="display: none;">
                    <img src="./images/no_pic.png"/>
                </div>

                <!--page-->
                <div class="page-div">
                    <span class="total">共44张图片</span>
                    <a class="prev icon iconfont icondayu" href=""></a>
                    <a href="">1</a>
                    <a href="">2</a>
                    <a href="">3</a>
                    <a class="ellipsis icon iconfont iconicongengduo" href=""></a>
                    <a href="">4</a>
                    <a href="">9</a>
                    <a href="">10</a>
                    <a class="next icon iconfont icondayu1" href=""></a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="fakeloader"></div>

<script src="./js/echarts.min.js"></script>
<script src="./js/jquery.nanoscroller.js"></script>
<script src="./js/check.js"></script>
<script src="./js/common.js"></script>
<script src="./js/form-commit.js"></script>
<script>
    limitPicMaxNum = 10; // 最大限制数量
    surplusPicNum = 10; // 剩余数量
</script>
<script>
    // 参考链接 https://www.layui.com/doc/modules/tree.html
    var tree;
    layui.use(['tree'], function () {
        var $ = layui.$
        tree = layui.tree

        //数据源  checked: true默认选中  href链接  disabled: true禁选
        var data = [
            {
                title: '一级1'
                , id: 1
                , children: [{
                    title: '二级1-1'
                    , id: 3
                    , href: 'https://www.layui.com/doc/'
                    , children: [{
                        title: '三级1-1-3'
                        , id: 23
                        , children: [{
                            title: '四级1-1-3-1'
                            , id: 24
                            , children: [{
                                title: '五级1-1-3-1-1'
                                , id: 30
                            }, {
                                title: '五级1-1-3-1-2'
                                , id: 31
                            }]
                        }]
                    }, {
                        title: '三级1-1-1'
                        , id: 7
                        , checked: true // 默认选中
                        , children: [{
                            title: '四级1-1-1-1'
                            , id: 15
                            //,checked: true
                            , href: 'https://www.layui.com/doc/base/infrastructure.html'
                        }]
                    }, {
                        title: '三级1-1-2'
                        , id: 8
                        , children: [{
                            title: '四级1-1-2-1'
                            , id: 32
                        }]
                    }]
                }, {
                    title: '二级1-2'
                    , id: 4
                    , spread: true
                    , children: [{
                        title: '三级1-2-1'
                        , id: 9
                        , checked: true
                        , disabled: true
                    }, {
                        title: '三级1-2-2'
                        , id: 10
                    }]
                }, {
                    title: '二级1-3'
                    , id: 20
                    , children: [{
                        title: '三级1-3-1'
                        , id: 21
                    }, {
                        title: '三级1-3-2'
                        , id: 22
                    }]
                }]
            }, {
                title: '一级2'
                , id: 2
                , spread: true
                , children: [{
                    title: '二级2-1'
                    , id: 5
                    , spread: true
                    , children: [{
                        title: '三级2-1-1'
                        , id: 11
                    }, {
                        title: '三级2-1-2'
                        , id: 12
                    }]
                }, {
                    title: '二级2-2'
                    , id: 6
                    , checked: true
                    , children: [{
                        title: '三级2-2-1'
                        , id: 13
                    }, {
                        title: '三级2-2-2'
                        , id: 14
                        , disabled: true
                    }]
                }]
            }, {
                title: '一级3'
                , id: 16
                , children: [{
                    title: '二级3-1'
                    , id: 17
                    , fixed: true
                    , children: [{
                        title: '三级3-1-1'
                        , id: 18
                    }, {
                        title: '三级3-1-2'
                        , id: 19
                    }]
                }, {
                    title: '二级3-2'
                    , id: 27
                    , children: [{
                        title: '三级3-2-1'
                        , id: 28
                    }, {
                        title: '三级3-2-2'
                        , id: 29
                    }]
                }]
            }];

        tree.render({
            elem: '#tree'
            , data: data
            , id: 'role'
            , click: function (obj) { // 点击节点监听
                // console.log("click:" + obj);
            }
            , oncheck: function (obj) { // 选择复选框监听
                // console.log("oncheck:" + obj);
            }
            , operate: function (obj) {
                var type = obj.type; //得到操作类型：add、edit、del
                var data = obj.data; //得到当前节点的数据
                var elem = obj.elem; //得到当前节点元素
                var id = data.id; //得到节点索引
                var parentId = data.parentId; //父节点

                //Ajax 操作
                if (type === 'update') { //修改节点
                    console.log(elem.find('.layui-tree-txt').html()); //得到当前内容
                    layer.open({
                        title: "编辑分组",
                        type: 2,
                        skin: "layer-miframe layer-move-dialog",
                        content: "file:///F:/web-project/%E5%93%8D%E8%B4%9D/%E5%90%8E%E5%8F%B0/XBMemberWeb/pic-bank-page-add-group-dialog.html",
                        btn: ['确认', '取消'],
                        yes: function (index, layero) {
                            var body = layer.getChildFrame('body', index);
                            var input = body.find(".selext-box").find("input");
                            var value = $(input).val();
                            if(!value){
                                showToast("请输入分组名称",3);
                                return;
                            }
                            // TODO
                            $.ajax({
                                type: "POST",
                                url: "",
                                data: {value: value},
                                dataType: "json",
                                success: function (data) {
                                    if (data.status == 200) {

                                    } else {

                                    }
                                },
                                error: function () {
                                    showToast("请求失败", 2);
                                }
                            });
                            layer.close(index)
                        }
                    });
                } else if (type === 'del') { //删除节点
                    layer.open({
                        title: "确认删除",
                        type: 1,
                        skin: "layer-info-dialog",
                        content: "<div class='box'><p class='img'><i class='icon iconfont icon4zhuyi-01'></i></p><p class='text'>确认删除该分组吗？</p></div>",
                        btn: ['确认', '取消'],
                        yes: function (index, layero) {
                            // TODO
                            $.ajax({
                                type: "POST",
                                url: "",
                                data: "",
                                dataType: "json",
                                success: function (data) {
                                    if (data.status == 200) {

                                    } else if (data.status == 201) { //  有分组不可删除
                                        showToast("分组下有图片，不能删除", 3)
                                    }
                                },
                                error: function () {
                                    showToast("请求失败", 2);
                                }
                            });
                            layer.close(index)
                        }
                    });
                }
            }
            , showCheckbox: false  //是否显示复选框
            , accordion: 0  //是否开启手风琴模式
            , onlyIconControl: true //是否仅允许节点左侧图标控制展开收缩
            , isJump: 0  //点击文案跳转地址
            , edit: true  //操作节点图标
            , customOperate: true
            , isJump: true // 是否允许跳转href
        });
    });

</script>
</body>

</html>